<template>
  <div>
    <!-- 顶部开始 -->
    <div class="title">
      <div class="title_container">
        <ul>
         <li><router-link to="/login">登录/注册</router-link></li>
          <li><router-link to="/center/myorder">我的订单</router-link></li>
          <li><a href="#">会员</a></li>
        <li><a href="#">甄选家</a></li>
          <li class="combox">
            <a href="#">企业采购</a>
            <div class="company">
              <ul>
                <li>企业购</li>
                <li>员工福利</li>
                <li>礼品卡</li>
                <li>联系我们</li>
              </ul>
            </div>
          </li>
          <li class="cusbox">
            <a href="#">客户服务</a>
            <div class="custmer">
              <ul>
                <li>企业购</li>
                <li>员工福利</li>
                <li>礼品卡</li>
                <li>联系我们</li>
              </ul>
            </div>
          </li>
          <el-popover placement="top-start" trigger="hover">
            <img
              src="https://yanxuan.nosdn.127.net/static-union/166020791894cf1d.png"
              alt=""
            />
            <li
              slot="reference"
              style="color: rgb(204, 204, 204); margin-left: -15px"
            >
              APP
            </li>
          </el-popover>
        </ul>
      </div>
    </div>
    <!-- 顶部结束 -->
    <!-- logo和列表搜索框开始 -->
    <div class="container">
      <div class="container_parent">
        <div class="top">
          <!-- logo -->
          <div class="logo" @click="goHome"></div>
          <div class="search_box">
            <div class="search">
              <div class="left">
                <input type="text" placeholder="杭州游礼" />
              </div>
              <div class="right">搜索</div>
            </div>
            <div class="nav_sear_frame">
              <ul>
                <li v-for="sr in searchRecommend" :key="sr.id">
                  <a href="">{{ sr.recommendName1 }}</a>
                </li>
                <li style="font-weight: 100"></li>
              </ul>
            </div>
          </div>
          <div class="buy" @click="goShopCar">
            <span class="nav_shopcar_logo">
              <i class="iconfont icon-gouwuchekong"></i>
            </span>
            <span class="nav_shopcar_name">购物车</span>
            <span class="nav_shopcar_num">0 </span>
          </div>
        </div>
        <div class="bottom">
          <ul>
            <li @click="goHome" style="cursor: pointer">首页</li>
            <li v-for="c1 in res" :key="c1.id">
              <a :title="c1.categoryName"
                ><router-link to="/category">{{
                  c1.categoryName
                }}</router-link></a
              >
              <div class="myFlex">
                <div class="categoryFlex">
                  <!-- 二级列表标签 -->
                  <dl v-for="c2 in c1.category2List" :key="c2.id">
                    <dd>
                      <div
                        style="margin: 20px 0; border-bottom: 1px solid black"
                      >
                        {{ c2.category2Name }}
                      </div>
                      <div style="font-size: 15px">
                        <ul v-for="c3 in c2.category3List" :key="c3.id">
                          <li>
                            <p style="float: right; font-weight: normal">
                              {{ c3.category3Name }}
                            </p>
                            <img
                              :src="c3.category3Img"
                              alt=""
                              style="width: 50px; margin-top: -10px"
                            />
                          </li>
                        </ul>
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </li>
            <li li @click="goHome" style="cursor: pointer">为你严选</li>
            <li li @click="goHome" style="cursor: pointer">众筹</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- logo和列表搜索框结束 -->
  </div>
</template>

<script>



import {getCategory, searchRecommend} from "@/api";



export default {
  name: 'XHeader',
  data() {
    return {
      res: '',
      searchRecommend: '',

    }

  },
  methods: {
    // 获取分页列表
    async getCategoryList() {
      this.res = await getCategory();
    },
    // 获取搜索推荐
    async getSearchRecommend() {

      this.searchRecommend = await searchRecommend();
    },
    goShopCar() {
      this.$router.push({
        name: "shopCar",
      });
    },
    goHome() {
      this.$router.push({
        name: "home",
      });
    },
 },

  mounted() {
    this.getCategoryList();
    this.getSearchRecommend();
  },
}
</script>
<style scoped>
.categoryFlex {
  height: 100% !important;
  display: flex;
  /*flex-direction: column;*/
  justify-content: space-around;
}
</style>
